import React from "react";
import type { Meta, StoryObj } from "@storybook/react";
import Example from "./example";
import { DetailContent } from "../../index";

const { Title } = DetailContent;

const meta: Meta<typeof Example> = {
  title: "components/DetailContent",
  component: DetailContent,
};

export default meta;
type Story = StoryObj<typeof DetailContent>;

export const Content: Story = {
  args: {
    children: `In the process of internal desktop applications development, many
        different design specs and implementations would be involved, which
        might cause designers and developers difficulties and duplication and
        reduce the efficiency of development. After massive project practice and
        summaries, Ant Design, a design language for background applications, is
        refined by Ant UED Team, which aims to uniform the user interface specs
        for internal background projects, lower the unnecessary cost of design
        differences and implementation and liberate the resources of design and
        front-end development.`,
  },
};

export const DetailTitle: Story = {
  args: {
    children: <Title>Introduction</Title>,
  },
};

export const CombinationUse: Story = {
  args: {
    children: (
      <DetailContent>
        <Title leftExtra={<span>ffasdf</span>} rightExtra={<a>按钮</a>}>
          Introduction
        </Title>
        In the process of internal desktop applications development, many
        different design specs and implementations would be involved, which
        might cause designers and developers difficulties and duplication and
        reduce the efficiency of development. After massive project practice and
        summaries, Ant Design, a design language for background applications, is
        refined by Ant UED Team, which aims to uniform the user interface specs
        for internal background projects, lower the unnecessary cost of design
        differences and implementation and liberate the resources of design and
        front-end development.
      </DetailContent>
    ),
  },
};
